<template>
    <div class="app-container">
      <div class="container">
        <div class="main page page-list">
          <div class="head-container">
            <el-card shadow="never">
              <div class="search-bar pd">
                <el-form
                  :inline="true"
                  :model="searchModel"
                  size="mini"
                  class="demo-form-inline"
                >
                  <el-form-item label="商户编号">
                    <el-input
                      v-model="searchModel.userId"
                      placeholder="商户编号"
                    />
                  </el-form-item>
  
                  <el-form-item label="合伙人编号">
                    <el-input
                      v-model="searchModel.partnerId"
                      placeholder="合伙人编号"
                    />
                  </el-form-item>
  
                  
                <el-form-item label="批次总笔数">
                    <div style="display:flex;">
                      <el-input
                        v-model="searchModel.minTotalCount"
                        placeholder="最少笔数"
                      />
                      ~
                      <el-input
                        v-model="searchModel.maxTotalCount"
                        placeholder="最大笔数"
                      />
                    </div>
                  </el-form-item>
  
                 <el-form-item label="统计日期">
                    <el-date-picker
                      v-model="searchModel.yearMonth"
                      type="month"
                      value-format="yyyy-MM"
                      placeholder="选择月份"
                    >
                    </el-date-picker>
                  </el-form-item>
  
                  <el-form-item >
                    <el-button type="success" @click="exportSafePayTransMonthStat">导出</el-button>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button type="default" @click="reset">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </div>
  
          <div class="data-list-wrap">
            <el-card shadow="never">
              <el-table
                v-loading="loading"
                :data="list"
                size="mini"
                style="width: 100%"
              >
              <el-table-column label="交易月">
                  <template slot-scope="scope">
                    <div >
                      {{scope.row.year}}-{{scope.row.month}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                prop="userId"
                label="商户编号"
              />
              <el-table-column
                prop="partnerId"
                label="合伙人编号"
              />
              <el-table-column
                prop="failCount"
                label="失败笔数"
              />
              <el-table-column
                prop="failedAmount"
                label="失败金额"
              />
              <el-table-column
                prop="successCount"
                label="成功笔数"
              />
              <el-table-column
                prop="successAmount"
                label="成功金额"
              />
              <el-table-column
                prop="totalCount"
                label="批次总笔数"
              />
              <el-table-column
                prop="totalTransAmount"
                label="批次总金额"
              />
              <el-table-column
                prop="finalServicePrice"
                label="服务费支出"
              >
              <template slot-scope="scope">
                  <div >
                    {{(scope.row.finalServicePrice / 100).toFixed(2)}}
                  </div>
                </template>
              </el-table-column>
             
              </el-table>
              <div class="paging-wrap">
                <el-pagination
                  :current-page="searchModel.pageNo"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="searchModel.pagesize"
                  :total="searchModel.count"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import moment from "moment";
  import { searchUserTransMonthStat } from "@/api/business";
  const defaultModel = {
  yearMonth: moment().subtract(1, "M").format("YYYY-MM"),
    minTotalCount: 1,
    userId: "",
    partnerId:"",
    pageNo: 1,
    pageSize: 10,
    count: 0,
  };
  export default {
    data() {
      return {
        searchModel: _.cloneDeep(defaultModel),
        list: [],
        loading: false,
      };
    },
    created() {
      // 初始化数据
      this.getList(1);
    },
    methods: {
      //导出
      exportSafePayTransMonthStat() {
        var $temp = $("<form type='hidden'>"); //创建form标签
        $temp.attr("target", "_black");
        $temp.attr("method", "get");
        $temp.attr("action", "/api/admin/user-trans-month-stat/export");
        var $input = $('<input type="hidden">');
        $input.attr("name", "searchModelJson");
  
        let searchModel = _.cloneDeep(this.searchModel);
        this.compileSearchModel(searchModel);
  
        $input.attr("value", JSON.stringify(searchModel));
        $temp.append($input);
        $(document.body).append($temp);
        $temp.submit();
      },
      // 修改分页
      handleSizeChange(val) {
        this.searchModel.pageSize = val;
        this.getList(1);
      },
      // 修改页面
      handleCurrentChange(val) {
        this.loading = true;
        this.getList(val);
      },
      getList(pageNo) {
        var self = this;
        this.loading = true;
        if (pageNo != undefined) {
          this.searchModel.pageNo = pageNo;
        }
        let searchModel = _.cloneDeep(this.searchModel);
        searchUserTransMonthStat(this.compileSearchModel(searchModel))
          .then((data) => {
            self.searchModel.pageNo = ++data.pageNo;
            self.searchModel.count = data.count;
            self.searchModel.pageSize = data.pageSize;
            self.list = data.data;
            self.loading = false;
          })
          .catch((err) => {});
      },
      // 重置查询条件
      reset() {
        this.searchModel = _.cloneDeep(defaultModel);
        this.getList(1);
      },
      // 查询
      search() {
        this.getList(1);
      },
      // 对searchModel进行处理
      compileSearchModel(searchModel) {
        searchModel.pageNo = searchModel.pageNo - 1;
       if (searchModel.yearMonth) {
          let yearMonth = searchModel.yearMonth.split("-");
          searchModel["year"] = yearMonth[0];
          searchModel["month"] = yearMonth[1];
        }
  
        delete searchModel.yearMonth;
        return searchModel;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .operations {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  </style>
  